<form method="post" onsubmit="saveForm(this)" action="{{ $action }}" enctype="multipart/form-data">
    @if($deal ?? ''  && $deal->id)
        @method('PUT')
    @endif
    @csrf
    <div class="modal-header">
        <h1 class="modal-title fs-6" id="exampleModalLabel"> <i class="fal fa-user me-1"></i> {{$head ?? ''}} </h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
        <div class="modal-form">
            <div class="row">

                <input type="hidden" name="month" value="{{$deal->month ?? $request->month}}">
                <div class="form-group col-lg-6">
                    <label for="" class="d-block mb-2"> {{ __('deals.start_date') }} <span style="color:red">*</span></label>
                    <input type="date" name="start_date" class="form-control" value="{{$deal->start_date ?? ''}}" placeholder="{{ __('deals.start_date') }}">
                </div>
                <div class="form-group col-lg-6">
                    <label for="" class="d-block mb-2"> {{ __('deals.end_date') }} <span style="color:red">*</span></label>
                    <input type="date" name="end_date" class="form-control" value="{{$deal->end_date ?? ''}}" placeholder="{{ __('deals.end_date') }}">
                </div>
                <div class="form-group col-lg-6">
                    <label for="" class="d-block mb-2"> {{ __('deals.amount') }} <span style="color:red">*</span></label>
                    <input type="number" step=".01" name="amount" class="form-control" value="{{$deal->amount ?? ''}}" placeholder="{{ __('deals.amount') }}">
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('deals.employee_id') }} <span style="color:red">*</span></label>
                    <select onchange="SelectEmployee(this)" name="employee_id" id="employee_id" class="form-control form-select">
                        <option value=""> {{ __('dashboard.select') }} </option>
                        @foreach($employees as $row)
                            <option {{ ($deal->employee_id ?? '' ) == $row->id ? 'selected' : '' }} value="{{ $row->id }}"> {{ $row->name }} </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('companies.sector_id') }} <span style="color:red">*</span></label>
                    <select onchange="SelectSector()" name="sector_id" id="sector_id" class="form-control form-select">
                        <option value=""> {{ __('dashboard.select') }} </option>
                        @foreach($sectors as $row)
                            <option {{ ($deal->sector_id ?? '' ) == $row->id ? 'selected' : '' }} value="{{ $row->id }}"> {{ $row->title }} </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group mb-3" >
                    <label for="" class="d-block mb-2"> {{ __('deals.status') }} </label>
                    <select id="status" name="status" class="form-control form-select">
                        @foreach($statuses as $row)
                            <option {{ ($deal->status ?? '' ) == $row ? 'selected' : '' }} value="{{ $row }}"> {{ __('deals.statuses.'.$row) }} </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group mb-3" >
                    <label for="" class="d-block mb-2"> {{ __('deals.payment_status') }} </label>
                    <select id="payment_status" onchange="SelecStatus()" name="payment_status" class="form-control form-select">
                        @foreach($payment_statuses as $row)
                            <option {{ ($deal->payment_status ?? '' ) == $row ? 'selected' : '' }} value="{{ $row }}"> {{ __('deals.payment_statuses.'.$row) }} </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group mb-3 items">
                    <div class="form-group mb-3">
                        <h5>{{ __('deals.payments') }}</h5>
                    </div>
                </div>
                <div class="form-group mb-3 items" id="items">
                     @foreach($payments as $key => $row)
                        @include('admin.deals.payments.index',['payment'=>$row,'key'=>$key])
                     @endforeach
                </div>

                <div class="form-group mb-3 items">
                    <a style="cursor: pointer;" data-id="{{count($payments)}}" onclick="additem(this)" class="btn_1 gray "><i class="fa fa-fw fa-plus-circle"></i>{{__("deals.add_new")}}</a>
                </div>

                <div class="form-group mb-3" id="products">
                    @include('admin.deals.products.index')
                </div>
                <div class="form-group mb-3" id="employees">
                    @include('admin.deals.employees.index')
                </div>
                <div class="form-group mb-3" id="companies">
                    @include('admin.deals.companies.index')
                </div>

                <div class="form-group mb-3" id="contact_lists">
                    @include('admin.deals.contact_lists.index')
                </div>
                @foreach($languages as $language)
                    <div class="col-lg-6">
                        <div class="form-group mb-3">
                            <label for="" class="d-block mb-2"> {{ __('deals.title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} <span style="color:red">*</span></label>
                            <input type="text" name="title_{{ $language->local }}" class="form-control" value="{{  $deal[$language->local]->title ?? "" }}" placeholder=" {{ __('deals.title') }}">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group mb-3">
                            <label for="" class="d-block mb-2"> {{ __('deals.description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                            <textarea type="text" name="description_{{ $language->local }}" class="form-control" placeholder=" {{ __('deals.description') }}">{{  $deal[$language->local]->description ?? "" }}</textarea>
                        </div>
                    </div>
                @endforeach

                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('deals.file') }} @if(!isset($deal)) <span style="color:red">*</span> @endif</label>
                    <input type="file" name="file" class="form-control" placeholder="{{ __('deals.file') }}">
                    <small style="color:red">
                        Only the following file types are allowed: PDF, Word (DOCX), PowerPoint (PPTX).
                    </small>
                    <br>
                    <small style="color:red">
                        Maximum file size: 10 MB.
                    </small>
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('deals.file_url') }} <span style="color:red">*</span></label>
                    <input type="url" name="file_url" class="form-control" value="{{$deal->file_url ?? ''}}" placeholder="{{ __('deals.file_url') }}" value="{{ $deal->file_url ?? '' }}">
                </div>


                @if(isset($deal) && ($deal->file ?? false) )
                    <div class="form-group mb-3">
                        <a href="{{asset($deal->file)}}" download class="blue-butn butn-st2 butn-md"><span> {{__('deals.download')}} </span></a>
                    </div>
                @endif
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="line-butn butn-st2 butn-md" data-bs-dismiss="modal" aria-label="Close"><span> {{ __('dashboard.cancel') }} </span></button>
        <button type="submit" class="blue-butn butn-st2 butn-md"><span> {{ __('dashboard.save') }} </span></button>
    </div>
</form>

<script>
    const dropdowns = document.querySelectorAll('.dropdown-select');
    dropdowns.forEach(dropdown => {
        const checkboxes = dropdown.querySelectorAll('.cat-selects input[type="checkbox"], .cat-selects input[type="radio"]');
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const dropdownButton = dropdown.querySelector('.cat-selected');
                dropdownButton.querySelectorAll('.cat-txt:not(:first-child)').forEach(el => el.remove());

                checkboxes.forEach(cb => {
                    if (cb.checked) {
                        const label = cb.nextElementSibling.innerText;
                        const newText = document.createElement('span');
                        newText.classList.add('cat-txt', 'me-1');
                        newText.textContent = label;
                        dropdownButton.appendChild(newText);
                    }
                });
            });
        });
    });

    $(".don-btn").on("click", function(){
        $(this).parents(".dropdown-menu").removeClass("show")
    })
    // Select all elements with the 'prevent-close' class
    document.querySelectorAll('.dropdown-select .dropdown-menu').forEach(function(element) {
        element.addEventListener('click', function(event) {
            event.stopPropagation(); // Prevents the dropdown menu from closing
        });
    });
</script>
<script src="{{url('')}}/assets/admin/js/custom/imageUpload.js"></script>
<script>

    function SelectEmployee(elem)
    {
        var employee_id = $(elem).val();

        $.ajax({
            url : "{{route('admin.fetch.employee')}}",
            type : 'GET',
            data : 'employee_id='+employee_id,
            success:function(data)
            {
                $('#sector_id').html(data);
                $('#companies').html('');
            }
        })
    }
    function SelectSector()
    {
        var sector_id = $('#sector_id').val();

        $.ajax({
            url : "{{route('admin.fetch.sector')}}",
            type : 'GET',
            data : 'sector_id='+sector_id,
            success:function(data)
            {
                $('#companies').html(data.companies);
            }
        })
    }
    function SelectCompany(elem)
    {
        var company_id = $(elem).val();

        $.ajax({
            url : "{{route('admin.fetch.company')}}",
            type : 'GET',
            data : 'company_id='+company_id,
            success:function(data)
            {
                $('#contact_lists').html(data);
            }
        })
    }

    function SelecStatus()
    {
        let status = $('#payment_status').val()
        if(status != 1)
        {
            $('.items').show()
        }
        else
        {
            $('.items').hide()
        }
    }
    $('#payment_status').trigger('change');

    function additem(elem)
    {
        var num = $(elem).attr('data-id');
        var newrow = parseInt(num)+1;
        $(elem).attr('data-id', newrow);

        $.ajax({
            url : "{{ route('admin.add.item') }}",
            type : 'GET',
            data : 'key='+num,
            success:function(data)
            {
                $('#items').append(data);
            }
        })
    }


    function remove(elem)
    {
        $(elem).closest('.row').remove();
    }
</script>

