@extends('admin.layout.master')

@section('content')
    <div class="card sina-card">
        <div class="card-header">
            <div class="d-flex justify-content-between">
                <h4>{{__('obs.commission_settings')}}</h4>
                <h4>{{ $allotment_info->code }}</h4>
            </div>
        </div>
        <div class="card-body">
            <form action="{{ route('frontdesk.allotment_commission.store') }}" method="POST" class="form_submit">
                <input type="hidden" name="allotment_id" value="{{ $allotment_info->id }}">
                <input type="hidden" name="type" value="2">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>{{__('obs.start_date')}}</th>
                            <th>{{__('obs.end_date')}}</th>
                            <th>{{__('obs.weekday_commission')}}</th>
                            <th>{{__('obs.weekend_commission')}}</th>
                            <th>{{__('obs.note')}}</th>
                            <th>
                                <button type="button" 
                                    class="btn btn-xs btn-success"
                                    onclick="addNewRow()"><i class="fa fa-plus-circle"></i>
                                </button>
                            </th>
                        </tr>
                    </thead>
                    <tbody id="commission_settings_table">
                    </tbody>
                </table>
                <div class="d-flex justify-content-end">
                    <button type="submit" style="width: 200px; text-align: center;" id="save_button" disabled="true" class="btn btn-primary">{{__('obs.save')}}</button>
                </div>
            </form>
        </div>
    </div>
    @include('frontdesk.common.common')
@endsection

@section('script')
    <script>
        let allotment_info = @json($allotment_info);

        $(document).ready(function() {
            if (allotment_info.get_commission_settings.length == 0) {
                addNewRow();
            } else {
                allotment_info.get_commission_settings.forEach(function(item) {
                    addNewRow(item);
                });
            }
            $('#save_button').prop('disabled', false);
        });
        const addNewRow = (item = null) => {
            let id = '';
            let start_date = allotment_info.start_date;
            let end_date = allotment_info.end_date;
            let commission_on_weekdays = 0;
            let commission_on_weekends = 0;
            let note = '';
            if(item){
                id = item.id;
                start_date = item.start_date;
                end_date = item.end_date;
                commission_on_weekdays = item.commission_on_weekdays;
                commission_on_weekends = item.commission_on_weekends;
                note = item.note;
            }
            let html = '';
            html += `<tr>
                <td>
                    <input type="hidden" name="id[]" value="${id}">
                    <input type="text" name="start_date[]" class="form-control date_picker" value="${formattedDate(start_date)}">
                </td>
                <td>
                    <input type="text" name="end_date[]" class="form-control date_picker" value="${formattedDate(end_date)}">
                </td>
                <td>
                    <input type="number" name="commission_on_weekdays[]" class="form-control" value="${commission_on_weekdays}">
                </td>
                <td>
                    <input type="number" name="commission_on_weekends[]" class="form-control" value="${commission_on_weekends}">
                </td>
                <td>
                    <input type="text" name="note[]" class="form-control" value="${note}">
                </td>
                <td>
                    <button type="button" onclick="deleteRow(this)" class="btn btn-danger btn-sm ${item ? 'd-none' : ''}">
                        <i class="fa fa-minus-circle"></i>
                    </button>
                </td>
            </tr>`;
            $('#commission_settings_table').append(html);
            $('.date_picker').flatpickr({
                dateFormat: 'd-m-Y',
                minDate: formattedDate(allotment_info.start_date),
                maxDate: formattedDate(allotment_info.end_date),
            });
        }
        const deleteRow = (el) => {
            $(el).closest('tr').remove();
        }
    </script>
@endsection