@if ($errors->any())
    <div class="row">
        <div class="col-md-12">
            <div class="mb-3">
                <div class="alert alert-primary" role="alert">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endif

<div class="row">
    <div class="col-12 col-md-6 mb-3">
        <label class="col-form-label"> Start Timestamp <span class="text-danger">*</span></label>
        <input type="text" wire:model="form.start" class="form-control" placeholder="Enter Start Timestamp" id="start_timestamp" />
        @error('form.start')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label class="col-form-label"> Stop Timestamp <span class="text-danger">*</span></label>
        <input type="text" wire:model="form.stop" class="form-control" placeholder="Enter Stop Timestamp" id="stop_timestamp" />
        @error('form.stop')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 mb-3">
        <label class="col-form-label">Description <span class="text-danger">*</span></label>
        <input type="text" wire:model="form.description" placeholder="Enter Description" class="form-control">
        @error('form.description')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 mb-3">
        <label class="col-form-label"> Notes <span class="text-danger">*</span></label>
        <textarea wire:model="form.notes" rows="10" cols="5" class="form-control" placeholder="Enter Note"></textarea>
        @error('form.notes')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-4 mb-3">
        <label class="col-form-label"> Cost ($) <span class="text-danger">*</span></label>
        <input wire:model="form.cost" step="0.01" type="number" min="0" class="form-control" placeholder="Enter Cost/Rate" />
        @error('form.cost')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-4 mb-3">
        <label class="col-form-label"> User <span class="text-danger">*</span></label>
        <select id="user_id" wire:model="form.user_id" class="form-select">
            <option value="" selected disable hidden>Select User</option>
            @foreach ($users as $user)
                <option value="{{ $user->id }}">{{ $user->given_names }} {{ $user->surname }} </option>
            @endforeach
        </select>
        @error('form.user_id')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-4 mb-3">
        <label class="col-form-label"> Contact <span class="text-danger">*</span></label>
        <select id="contact_id" wire:model="form.contact_id" class="form-select">
            <option value="" selected disable hidden>Select User</option>
            @foreach ($contacts as $contact)
                <option value="{{ $contact->id }}">{{ $contact->name }} </option>
            @endforeach
        </select>
        @error('form.contact_id')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>
</div>

@script
<script>
    $(document).ready(function () {
        ['user_id', 'contact_id'].forEach(function (id) {
            // For initial load
            $(`#${ id }`).select2({
                placeholder: ""
            });

            // For DOM reloads
            Livewire.hook('morphed', ({el, component}) => {
                $(`#${ id }`).select2({
                    placeholder: ""
                });
            });
        });

        var obj = {
            timePicker: true,
            singleDatePicker: true,
            showDropdowns: true,
            opens: 'center',
            drops: 'auto',
            locale: {
                format: 'YYYY-MM-DD hh:mm A'
            }
        };

        $('#start_timestamp').daterangepicker(obj);
        $('#stop_timestamp').daterangepicker(obj);

        $('#start_timestamp').on('apply.daterangepicker', function (ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD hh:mm A'));
            @this.
            set('form.start', picker.startDate.format('YYYY-MM-DD hh:mm A'))
        });
        $('#stop_timestamp').on('apply.daterangepicker', function (ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD hh:mm A'));
            @this.
            set('form.stop', picker.startDate.format('YYYY-MM-DD hh:mm A'))
        });
    })
</script>
@endscript