@extends('layouts.master')

@section('title', 'Devices')

@section('content')

<div class="card">

    <div class="card-header">

        <div class="d-flex justify-content-between align-items-center">

            <h4 class="card-title mb-0">
                Device List
            </h4>

            <div>

                <button class="btn btn-primary"
                        data-bs-toggle="modal"
                        data-bs-target="#addDeviceModal">

                    <i class="bi bi-plus-circle"></i>
                    Add Device

                </button>

                <button class="btn btn-success"
                        data-bs-toggle="modal"
                        data-bs-target="#importDeviceModal">

                    <i class="bi bi-upload"></i>
                    Import Devices

                </button>

            </div>

        </div>

    </div>

    <div class="card-body">

        <div class="table-responsive">
            
           <div class="row mb-3">

    <div class="col-md-6">

        <label>Search Multiple Serial Numbers</label>

        <textarea id="multiSerialSearch"
                  class="form-control"
                  rows="4"
                  placeholder="Paste serial numbers here..."></textarea>

        <small class="text-muted">
            You can paste from Excel, separated by new line or space
        </small>

    </div>

</div> 
            

            <table class="table table-striped" id="devicesTable">

                <thead>
                    <tr>
                        <th>Serial Number</th>
                        <th>Device Type</th>
                        <th>Model</th>
                        <th>SIM Card</th>
                        <th>IMEI</th>
                        <th>Status</th>
                        <th>Created By</th>
                        <th width="120">Action</th>
                    </tr>
                </thead>

                <tbody>

                    @foreach($devices as $device)

                        <tr>

                            <td>{{ $device->serial_number }}</td>

                            <td>{{ $device->device_type }}</td>

                            <td>{{ $device->model_name }}</td>

                            <td>{{ $device->sim_card_no }}</td>

                            <td>{{ $device->imei }}</td>

                            <td>

                                @if($device->status == 'available')
                                    <span class="badge bg-success">
                                        AVAILABLE
                                    </span>
                                @else
                                    <span class="badge bg-secondary">
                                        {{ strtoupper($device->status) }}
                                    </span>
                                @endif

                            </td>

                            <td>
                                {{ optional($device->creator)->name }}
                            </td>

                          <td>

    <button
        class="btn btn-sm btn-primary edit-device"

        data-id="{{ $device->id }}"
        data-serial_number="{{ $device->serial_number }}"
        data-device_type="{{ $device->device_type }}"
        data-model_name="{{ $device->model_name }}"
        data-sim_card_no="{{ $device->sim_card_no }}"
        data-imei="{{ $device->imei }}"
        data-status="{{ $device->status }}">

        <i class="bi bi-pencil"></i>

    </button>

    <form action="{{ route('devices.destroy', $device->id) }}"
          method="POST"
          class="delete-form d-inline">

        @csrf
        @method('DELETE')

        <button type="button"
                class="btn btn-sm btn-danger delete-device">

            <i class="bi bi-trash"></i>

        </button>

    </form>

</td>

                        </tr>

                    @endforeach

                </tbody>

            </table>

        </div>

    </div>

</div>




<div class="modal fade" id="editDeviceModal">

    <div class="modal-dialog modal-lg">

        <form method="POST" id="editDeviceForm">

            @csrf
            @method('PUT')

            <div class="modal-content">

                <div class="modal-header">
                    <h5>Edit Device</h5>

                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal">
                    </button>
                </div>

                <div class="modal-body">

                    <input type="hidden" id="device_id">

    <div class="mb-3">
    <label>Serial Number</label>
    <input type="text"
           name="serial_number"
           id="serial_number"
           class="form-control">
</div>

<div class="mb-3">
    <label>IMEI</label>
    <input type="text"
           name="imei"
           id="imei"
           class="form-control">
</div>

                    <div class="mb-3">
                        <label>Device Type</label>
                        <input type="text"
                               name="device_type"
                               id="device_type"
                               class="form-control">
                    </div>

                    <div class="mb-3">
                        <label>Model Name</label>
                        <input type="text"
                               name="model_name"
                               id="model_name"
                               class="form-control">
                    </div>

                    <div class="mb-3">
                        <label>SIM Card No</label>
                        <input type="text"
                               name="sim_card_no"
                               id="sim_card_no"
                               class="form-control">
                    </div>

                    <div class="mb-3">
                        <label>Status</label>

                        <select name="status"
                                id="status"
                                class="form-select">

                            <option value="available">Available</option>
                            <option value="dispatched">Dispatched</option>
                            <option value="leased">Leased</option>
                            <option value="returned">Returned</option>
                            <option value="border_stock">Border Stock</option>

                        </select>

                    </div>

                </div>

                <div class="modal-footer">

    <button type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal">
        Close
    </button>

    <button type="submit"
            class="btn btn-primary">
        Update Device
    </button>

</div>

            </div>

        </form>

    </div>

</div>




@push('scripts')
<script>

$(document).ready(function () {

    let table = $('#devicesTable').DataTable({

        order: [
            [0, 'desc']
        ],

        pageLength: 25,

        responsive: true,

        dom: 'Bfrtip',

        buttons: [
            'copy',
            'excel',
            'csv',
            'print'
        ]

    });


    $('#multiSerialSearch').on('keyup change', function(){

        let serials = $(this)
            .val()
            .split(/[\s,]+/)
            .filter(Boolean);


        $.fn.dataTable.ext.search.push(function(settings, data){

            let serialNumber = data[0].trim(); 
            // column 0 = Serial Number

            if(serials.length === 0){
                return true;
            }

            return serials.includes(serialNumber);

        });


        table.draw();


        $.fn.dataTable.ext.search.pop();

    });


});

$(document).on('click','.edit-device',function(){

    let id = $(this).data('id');

    $('#serial_number').val($(this).data('serial_number'));
$('#imei').val($(this).data('imei'));
$('#device_type').val($(this).data('device_type'));
$('#model_name').val($(this).data('model_name'));
$('#sim_card_no').val($(this).data('sim_card_no'));
$('#status').val($(this).data('status'));

    $('#editDeviceForm').attr(
    'action',
    "{{ url('devices') }}/" + id
);

    const modal = new bootstrap.Modal(
        document.getElementById('editDeviceModal')
    );

    modal.show();

});



$(document).on('click','.delete-device',function(){

    let form = $(this).closest('form');

    Swal.fire({
        title: 'Delete Device?',
        text: "This action cannot be undone.",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, Delete',
        cancelButtonText: 'Cancel'
    }).then((result) => {

        if(result.isConfirmed){
            form.submit();
        }

    });

});



</script>
@endpush

@include('devices.partials.add-device-modal')
@include('devices.partials.import-device-modal')

@endsection