@extends('layouts.master')

@section('title', 'Customers')

@section('content')

    <div class="card">

        <div class="card-header">

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

                <h4 class="mb-0">
                    Customers
                </h4>

                @can('settings.edit')
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCustomerModal">

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

                    </button>
                @endcan

            </div>

        </div>

        <div class="card-body">

            <div class="table-responsive">

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

                    <thead>

                        <tr>

                            <th>S/N</th>

                            <th>Name</th>

                            <th>Contact Person</th>

                            <th>Phone</th>

                            <th>Master Price</th>

                            <th>Slave Price</th>

                            <th>Status</th>

                            <th>Action</th>

                        </tr>

                    </thead>

                    <tbody>

                        @foreach ($customers as $customer)
                            <tr>

                                <td>
                                    {{ $loop->iteration }}
                                </td>

                                <td>
                                    {{ $customer->name }}
                                </td>

                                <td>
                                    {{ $customer->contact_person }}
                                </td>

                                <td>
                                    {{ $customer->phone }}
                                </td>

                                <td>
                                    {{ number_format($customer->master_price) }}
                                </td>

                                <td>
                                    {{ number_format($customer->slave_price) }}
                                </td>

                                <td>

                                    @if ($customer->status)
                                        <span class="badge bg-success">
                                            ACTIVE
                                        </span>
                                    @else
                                        <span class="badge bg-danger">
                                            DISABLED
                                        </span>
                                    @endif

                                </td>

                                <td>

                                    @can('settings.edit')
                                        <button class="btn btn-primary btn-sm edit-customer" data-id="{{ $customer->id }}"
                                            data-name="{{ $customer->name }}"
                                            data-contact_person="{{ $customer->contact_person }}"
                                            data-phone="{{ $customer->phone }}" data-email="{{ $customer->email }}"
                                            data-tin="{{ $customer->tin }}" data-vrn="{{ $customer->vrn }}"
                                            data-address="{{ $customer->address }}"
                                            data-master_price="{{ $customer->master_price }}"
                                            data-slave_price="{{ $customer->slave_price }}"
                                            data-status="{{ $customer->status }}" data-bs-toggle="modal"
                                            data-bs-target="#editCustomerModal">

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

                                        </button>
                                    @endcan

                                </td>

                            </tr>
                        @endforeach

                    </tbody>

                </table>

            </div>

        </div>

    </div>

    @include('customers.partials.add-customer-modal')

    @include('customers.partials.edit-customer-modal')

@endsection

@push('scripts')
    <script>
        $(document).ready(function() {

            $('#devicestockTable').DataTable({

                order: [
                    [1, 'desc']
                ],

                pageLength: 25,

                responsive: true,

                dom: 'Bfrtip',

                buttons: [

                    'copy',
                    'excel',
                    'csv',
                    'print'

                ]

            });
        });

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

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

                $('#editCustomerForm').attr(
                    'action',
                    '/customers/' + id
                );

                $('#edit_name').val(
                    $(this).data('name')
                );

                $('#edit_contact_person').val(
                    $(this).data('contact_person')
                );

                $('#edit_phone').val(
                    $(this).data('phone')
                );

                $('#edit_email').val(
                    $(this).data('email')
                );

                $('#edit_tin').val(
                    $(this).data('tin')
                );

                $('#edit_vrn').val(
                    $(this).data('vrn')
                );

                $('#edit_address').val(
                    $(this).data('address')
                );

                $('#edit_master_price').val(
                    $(this).data('master_price')
                );

                $('#edit_slave_price').val(
                    $(this).data('slave_price')
                );

                $('#edit_status').val(
                    $(this).data('status')
                );

            }
        );
    </script>
@endpush
