@extends('layouts.tenant.master')
@section('title', 'Bulletins Menu')
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ dynamic_url('assets/main/css/owlcarousel.css') }}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
@endsection
@section('style')
@endsection
@section('breadcrumb-title')
    <h2>Create <span>Bulletins</span></h2>
@endsection
@section('breadcrumb-items')
    <li class="breadcrumb-item">Bulletins</li>
    <li class="breadcrumb-item active">List</li>
@endsection
@section('content')
    <form action="{{ route('tenant_bulletin_store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4 ">
                <div class="form-group">
                    <label>Select User Send Option<span class="asterisk"> *</span></label>
                    <select name="user_option" id="select_user_send_option" class="select_user_send_option form-control"
                        required>
                        <option value="">--Select--</option>
                        <option value="every_one">Every One</option>
                        <option value="specific_user">Specific User</option>
                    </select>
                    <span class="err" style="color: red;"></span>
                </div>
            </div>

            <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4 user_type" style="display: none;">
                <div class="form-group">
                    <label>Select User Type<span class="asterisk"> *</span></label>
                    <select name="representative_option" id="representative_option" class="select_user_type form-control" required>
                        <option value="">--Select--</option>
                        @foreach ($all_representative as $representative)
                            <option value="{{$representative->username}}">{{$representative->username}}</option>
                        @endforeach
                    </select>
                    <span class="err" style="color: red;"></span>
                </div>
            </div>


            <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                <div class="form-group">
                    <label>Title<span class="asterisk"> *</span></label>
                    <input name="bulletin_title" id="bulletin_title" type="text" class="form-control">
                    <span class="err" style="color: red;"></span>
                </div>
            </div>
            <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                <div class="form-group">
                    <label>Description <span class="asterisk"> *</span></label>
                    <input name="bulletin_description" id="Description *" type="text" class="form-control">
                    <span class="err" style="color: red;"></span>
                </div>
            </div>
            <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                <div class="form-group">
                    <label>Select File<span class="asterisk"> *</span></label>
                    <input name="image" id="bulletin_file" type="file" class="form-control"
                        accept=".jpg,.jpeg,.pdf,.doc,.docx">
                    <span class="err" style="color: red;"></span>
                </div>
            </div>
            <div class="text-center col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <input name="btn_submit" id="btnSubmit" type="submit" class="btn btn-info" value="create Bulletins"
                        style="margin: 15px;">
                </div>
            </div>
        </div>
    </form>
@endsection
@section('script')
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    {{-- <script src="{{ route('/') }}/assets/main/js/datatable/datatables/jquery.dataTables.min.js"></script>
    <script src="{{ route('/') }}/assets/main/js/datatable/datatable-extension/dataTables.buttons.min.js"></script>
    <script src="{{ route('/') }}/assets/main/js/datatable/datatable-extension/jszip.min.js"></script>
    <script src="{{ route('/') }}/assets/main/js/datatable/datatable-extension/buttons.colVis.min.js"></script>
    <script src="{{ route('/') }}/assets/main/js/datatable/datatable-extension/pdfmake.min.js"></script>
    <script src="{{ route('/') }}/assets/main/js/datatable/datatable-extension/vfs_fonts.js"></script> --}}
    @if (session('success'))
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: '{{ session('success') }}',
                confirmButtonText: 'OK'
            });
        </script>
    @elseif(session('error'))
        <script>
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: '{{ session('error') }}',
                confirmButtonText: 'OK'
            });
        </script>
    @endif
    <script>
        $(document).ready(function() {
            $(document).on('change', '#select_user_send_option', function() {
                let item = $(this).val();
                if (item === 'every_one' || item === '' ) {
                    $(".user_type").hide();
                } else {
                    $(".user_type").show();
                }
            });

            // Trigger change once on page load
            $('#select_user_send_option').trigger('change');

        });
    </script>
@endsection