@extends('layouts.master')
@section('css')
    <link href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
    <!--datatable responsive css-->
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet"
        type="text/css" />
    <link href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
    <style>
        .buttons-html5,
        .buttons-print {
            background: #405189 !important;
            color: white !important;
            margin: 5px !important;
            height: 31px !important;
            width: 70px !important;
            border-radius: 5px !important;
        }
    </style>
@endsection
@section('title')
    Customers Type
@endsection
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="p-3">
                    @if (session()->has('message'))
                        <div class="alert alert-success" role="alert">
                            {{ session('message') }}
                        </div>
                    @endif
                    @if (session()->has('error'))
                        <div class="alert alert-danger" role="alert">
                            {{ session('message') }}
                        </div>
                    @endif
                </div>
                <div class="card-header d-flex phcl-flx">
                    <h4 class="card-title mb-0 flex-grow-1">
                        Customers Type
                    </h4>
                    <div class="phcl-flx-btns">
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">Add
                            Type</button>
                    </div>
                </div>
                <div class="card-body">
                    <table id="fixed-header" class="table table-bordered dt-responsive nowrap table-striped align-middle"
                        style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Type</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($types as $type)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td width="80%">{{ $type->name }}</td>
                                    <td>
                                        <div class="d-flex gap-2 justify-content-end">
                                            <a href="#" class="btn btn-primary edit-source" style="width:100px"
                                                data-id="{{ $type->id }}">Edit</a>
                                            <form action="{{ route('customer-type.destroy', $type->id) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <input type="submit"class="btn btn-danger" style="width:100px !important"
                                                    value="Delete">
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    {{-- Add Source Modal --}}
    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ route('customer-type.store') }}" method="POST">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Add Type</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">

                        <div class="mb-3">
                            <label for="source-name" class="form-label">Type Name</label>
                            <input type="text" class="form-control" name="name" id="source-name" required
                                placeholder="Enter Type name">
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="sumbit" class="btn btn-primary">Save</button>
            </form>
        </div>
    </div>
    </div>
    </div>
    {{--  --}}
    {{-- Edit Source Model --}}
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form action="" id="edit-source-form" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Edit Customer Type</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">

                        <div class="mb-3">
                            <label for="source-name" class="form-label">Customer Type</label>
                            <input type="text" class="form-control" name="name" id="edit-source-name" required
                                placeholder="Enter Customer Type">
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="sumbit" class="btn btn-primary">Save</button>
            </form>
        </div>
    </div>
    </div>
    </div>
    {{--  --}}
@endsection
@section('script')
    <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.print.min.js" type="text/javascript"></script>

    <script>
        $(document).ready(function() {

            $('.edit-source').on('click', function() {
                var id = $(this).data('id');
                var url = '{{ route('customer-type.edit', ':id') }}';
                url = url.replace(':id', id);
                $.ajax({
                    url: url,
                    type: 'GET',
                    data: {
                        id: id
                    },
                    success: function(response) {
                        console.log(response);
                        $('#edit-source-name').val(response.data['name']);
                        var url = '{{ route('customer-type.update', ':id') }}';
                        url = url.replace(':id', response.data['id']);
                        $('#edit-source-form').attr('action', url);
                        $('#editModal').modal('show');
                    }
                })
            })

        });
    </script>
@endsection