@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Toplu Sms Gönder' => '/operation/send/sms',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        <div class="pt-24 flex flex-col justify-center items-center">
            <div class="flex justify-center items-center gap-4">
                <button data-type="all" type="button"
                    class="relative py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-full border border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-4 focus:ring-gray-100">
                    <span class="absolute right-0 -top-1 w-3 h-3 rounded-full bg-green-600 hidden"></span>

                    Tüm Kullanıcılar
                </button>
                <button data-type="active" type="button"
                    class="relative py-2.5 px-5 me-2 mb-2 text-sm font-medium focus:outline-none rounded-full border focus:z-10 focus:ring-4 focus:ring-blue-700 bg-blue-800 border-blue-600 text-white hover:bg-blue-700">
                    <span class="absolute right-0 -top-1 w-3 h-3 rounded-full bg-green-600 hidden"></span>

                    Aktif Kullanıcılar
                </button>
                <button data-type="passive" type="button"
                    class="relative py-2.5 px-5 me-2 mb-2 text-sm font-medium focus:outline-none rounded-full border focus:z-10 focus:ring-4 focus:ring-red-700 bg-red-800 text-white border-red-600 hover:bg-red-700">
                    <span class="absolute right-0 -top-1 w-3 h-3 rounded-full bg-green-600 hidden"></span>
                    Pasif Kullanıcılar
                </button>
            </div>
            <form action="{{ route('operation.sendSmsToWorkersPost') }}" method="post"
                class="flex flex-col items-start mt-8">
                @csrf
                <label class="text-gray-300 text-base font-medium mb-2">
                    Mesajınızı Girin
                </label>
                {{-- <select name="type" id="type">
                    <option value="all">Tum Kullanicilar </option>
                    <option value="active">Aktif Kullanicilar </option>
                    <option value="passive">Passive Kullanicilar </option>
                </select> --}}
                <input type="hidden" name="type" id="type">
                <textarea class="input-2 resize-none" name="content" cols="30" rows="10">{{ old('content') }}</textarea>
                <div class="flex justify-end w-full mt-4">
                    <button class="button-3 w-full justify-center" type="submit">Gönder</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('javascript')
    <script>
        $('[data-type]').click(function() {
            var type = $(this).data('type');

            $('#type').val(type);

            $('[data-type]').find('span').hide('fast');
            $(this).find('span').fadeIn();
        });

        function x() {
            var val = $('#type').val();

        }
    </script>
@endsection