@extends('layout.master')
@section('content')
    <div class="container-fluid">
        <!-- Start::page-header -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            <div>
                <h2 class="main-content-title fs-24 mb-1">Users</h2>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Users</li>
                </ol>
            </div>
            
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div class="card-title">
                            Users
                        </div>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#addAgentModal">
                            <i class="bi bi-plus"></i> Add User
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="datatable-basic" class="table table-bordered text-nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>First Name</th>
                                        <th>Email</th>
                                        <th>Phone Number</th>
                                        <th>Role</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($agents as $agent)
                                    <tr id="agentRow_{{ $agent->id }}" data-id="{{ $agent->id }}">
                                        <td>{{ $agent->name }}</td>
                                            <td>{{ $agent->email }}</td>
                                            <td>{{ $agent->phone_no }}</td>
                                            <td>{{ $agent->user_type }}</td>
                                            <td>
                                                <button class="btn btn-warning btn-sm" onclick="editmodal({{$agent}})" data-id="{{ $agent->id }}" data-bs-toggle="modal" data-bs-target="#addAgentModal"><i class="bi bi-pencil"></i></button>
                                                <button class="btn btn-danger btn-sm delete-agent" 
                                                    data-id="{{ $agent->id }}" 
                                                    data-name="{{ $agent->name }}">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                                </td>
                                        </tr>
                                    @endforeach


                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Add Agent modal --}}
        <div class="modal fade" id="addAgentModal" tabindex="-1" aria-labelledby="addAgentModal" data-bs-keyboard="false"
            aria-hidden="true">
            <!-- Scrollable modal -->
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="staticBackdropLabel2">Add User</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="addAgent">

                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="fname" class="form-label fs-14 text-dark">First Name</label>
                                        <input type="text" class="form-control" id="fname"
                                            placeholder="Enter First Name">
                                        <input type="hidden" class="form-control" id="agent_id"
                                            placeholder="Enter First Name">
                                    </div>
                                </div>
                                <input type="hidden" name="_token" id="csrf_token" value="{{ csrf_token() }}">

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="lname" class="form-label fs-14 text-dark">Last Name</label>
                                        <input type="text" class="form-control" id="lname"
                                            placeholder="Enter Last Name">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="email" class="form-label fs-14 text-dark">Email</label>
                                        <input type="email" class="form-control" id="email" placeholder="Enter Email">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="role" class="form-label fs-14 text-dark">Role</label>
                                        <select id="role" required class="form-select" aria-label="Role">
                                            <option value="" selected>Select Role</option>
                                            @foreach ($roles as $role)
                                                <option value="{{ $role->name }}">{{ $role->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="ph-no" class="form-label fs-14 text-dark">Phone Number</label>
                                        <input type="number" class="form-control" id="ph_no"
                                            placeholder="Enter Phone Number">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="pass" class="form-label fs-14 text-dark">Password</label>
                                        <input type="password" class="form-control" id="pass"
                                            placeholder="Enter Password">
                                    </div>
                                </div>
                            </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">Add</button>
                        </div>


                    </form>



                </div>
            </div>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- SweetAlert 2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>

        function editmodal(agent){
            console.log(agent.email);
            $('#fname').val(agent.name.split(" ")[0]);
            $('#lname').val(agent.name.split(" ")[1]);
            $('#email').val(agent.email);
            $('#ph_no').val(agent.phone_no);
            $('#role').val(agent.user_type);
            $('#pass').val('');
            $('#agent_id').val(agent.id);
            $("#staticBackdropLabel2").html("Edit User")
        }

        $(document).on("click", ".delete-agent", function () {
            let agentId = $(this).data("id");
            let agentName = $(this).data("name");

            Swal.fire({
                title: "Are you sure?",
                text: "Do you really want to delete " + agentName + "?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "/agentDelete/" + agentId, // Laravel route
                        type: "get",
                        headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
                        success: function (response) {
                            if (response.status === 200) {
                                Swal.fire("Deleted!", "Agent has been deleted.", "success");
                                $("#agentRow_" + agentId).remove(); // Row remove karo
                            } else {
                                Swal.fire("Error!", response.message, "error");
                            }
                        },
                        error: function (xhr) {
                            Swal.fire("Error!", "Something went wrong.", "error");
                        }
                    });
                }
            });
        });


        $(document).ready(function() {
            $('#addAgent').submit(function(e) {
                e.preventDefault(); // Form submit hone se roko

                // Form values le lo
                var fname = $('#fname').val();
                var lname = $('#lname').val();
                var email = $('#email').val();
                var role = $('#role').val();
                var ph_no = $('#ph_no').val();
                var pass = $('#pass').val();
                var csrf_token = $('#csrf_token').val();
                var agent_id = $('#agent_id').val();

                // Laravel ka route set karna
                var urlnew = agent_id ? "{{ route('agent.update', ':id') }}".replace(':id', agent_id) : "{{ route('agent.store') }}";
                var methodType = agent_id ? "PUT" : "POST"; // Update ke liye PUT use hota hai

                $.ajax({
                    url: urlnew,
                    type: methodType, // POST ya PUT
                    data: {
                        fname: fname,
                        lname: lname,
                        email: email,
                        role: role,
                        ph_no: ph_no,
                        pass: pass,
                        pass: pass,
                        _token: csrf_token // CSRF token bhejna zaroori hai
                    },
                    success: function(response) {
                        if (response.status == 200) {
                            alert("Agent successfully " + (agent_id ? "updated!" : "added!"));

                            var newRow = `
                                <tr>
                                    <td>${response.agent.name}</td>
                                    <td>${response.agent.email}</td>
                                    <td>${response.agent.phone_no}</td>
                                    <td>${response.agent.user_type}</td>
                                    <td>
                                        <button class="btn btn-warning btn-sm edit-agent" data-id="${response.agent.id}"><i class="bi bi-pencil"></i></button>
                                        <button class="btn btn-danger btn-sm delete-agent" data-id="${response.agent.id}"><i class="bi bi-trash"></i></button>
                                    </td>
                                </tr>
                            `;

                            if (agent_id) {
                                // Update existing row
                                $('tr[data-id="' + agent_id + '"]').replaceWith(newRow);
                            } else {
                                // Add new row
                                $('tbody').append(newRow);
                            }

                            $('#addAgent')[0].reset(); // Form clear karo
                            $('#addAgentModal').modal('toggle'); // Modal band karo
                        } else {
                            alert("Something went wrong!");
                        }
                    },
                    error: function(xhr) {
                        let Resp = JSON.parse(xhr.responseText);
                        console.error("Error:", Resp);
                        alert("Error: " + Resp.message);
                    }
                });
            });




        });
    </script>
@endsection