@extends('admin.layout')

@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">

    <div class="row mb-3">
        <div class="row d-flex justify-content-between">
            <h4 class="page-top-heading">Add Package</h4>
        </div>
        <div class="container my-4">
            <div class="row d-flex justify-content-center">
                <!-- Add Package Form -->
                <div class="card p-4 mb-4" style="width:600px;">
                    <form action="{{ route('add_package_post') }}" method="POST" enctype="multipart/form-data"
                        id="addForm">
                        @csrf
                        <div class="mb-3">
                            <label for="packageImage" class="form-label">Package Image</label>
                            <input type="file" class="form-control" id="packageImage" name="package_image"
                                accept="image/png, image/jpeg">
                            <small class="text-muted">Image size must be 1920x1080 pixels (PNG or JPEG).</small>
                        </div>
                        <div class="mb-3">
                            <label for="packageTitle" class="form-label">Package ID</label>
                            <input type="text" class="form-control" id="packageTitle" name="package_id" maxlength="200"
                                placeholder="Enter package Id">
                        </div>
                        <div class="mb-3">
                            <label for="packageTitle" class="form-label">Package Title</label>
                            <input type="text" class="form-control" id="packageTitle" name="title" maxlength="200"
                                placeholder="Enter package title">
                        </div>
                        <div class="mb-3">
                            <label for="packageDescription" class="form-label">Description</label>
                            <textarea class="form-control" id="packageDescription" name="description" rows="3"
                                placeholder="Enter package description"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="mrp" class="form-label">MRP</label>
                            <input type="number" class="form-control" id="mrp" min="1" name="mrp"
                                placeholder="Enter MRP">
                        </div>
                        <div class="mb-3">
                            <label for="discountPrice" class="form-label">Discount Price</label>
                            <input type="number" class="form-control" id="discountPrice" min="1"
                                name="discount_price" placeholder="Enter discount price">
                        </div>
                        <div class="mb-3">
                            <label for="pv" class="form-label">PV</label>
                            <input type="number" class="form-control" id="pv" min="1" name="pv"
                                placeholder="Enter PV">
                        </div>

                        <div class="package-dropdown">
                <label for="packageDropdown" class="form-label fw-bold">Select</label>
                <select id="packageDropdown" name="package_type" class="form-select">
                    <option value="" disabled selected>Select  Type</option>
                        <option value="activation">Activation Package</option>
                        <option value="upgrade">Upgrade Package</option>
                        <option value="product">Products</option>
                </select>
            </div>

                        <button type="submit" class="btn btn-primary submit-btn mt-4 mb-2" id="submitButton"
                            onclick="disableButtonpp(this)">Submit</button>
                    </form>
                </div>
            </div>


            <div class="row mt-4">
                <!-- Package History -->
                <div class="card p-4">
                    <h4 class="mb-4">Package History</h4>
                    <div class="table-responsive">
                        <table id="packageTable" class="table table-hover table-borderless">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Date</th>
                                    <th>Package ID</th>
                                    <th>Image</th>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>MRP</th>
                                    <th>DP</th>
                                    <th>PV</th>
                                    <th>Package Type</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            @php
                                $sn = 1; // Initialize serial number
                            @endphp
                            <tbody>
                                @foreach ($datatables as $data)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $data->created_at }}</td>
                                        <td>{{ $data->package_id }}</td>
                                        <td>
                                            <a href="{{ url($data->package_image) }}"
                                                target="_blank">
                                                <img src="{{ url($data->package_image) }}"
                                                    alt="Proof Image" style="width: 100px; height: auto;">
                                            </a>
                                        </td>
                                        <td>{{ $data->title }}</td>
                                        <td>{{ $data->description }}</td>
                                        <td>{{ $data->mrp }}</td>
                                        <td>{{ $data->discount_price }}</td>
                                        <td>{{ $data->pv }}</td>
                                         <td>{{ $data->package_type }}</td>
                                        <td>
                                           <div class="d-flex gap-2">
                                            <a href="{{route('admin.edit_package',['id' => $data->id ])}}" class="btn btn-sm btn-primary px-2 w-100">Edit</a>

                                            <a class="btn btn-sm btn-danger text-white px-2 w-100" data-bs-toggle="modal" data-bs-target="#acceptModal" data-user-id="{{ $data->id }}"
                                                onclick="setDeleteId(this)">Delete</a>
                                            </div> 
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        
<!-- Delete Modal -->
<div class="modal fade" id="acceptModal" tabindex="-1" aria-labelledby="acceptModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-5">
                <h4 class="mb-3 fw-bold">Are you sure?</h4>
                <hr>
                <h6 class="mb-4 fw-regular mt-3">Are you sure you want to Delete this Package?</h6>
                <form action="{{ route('delete_package') }}" method="POST" >
                    @csrf
                    <input type="hidden" id="delete_id" name="delete_id">
                <div class="d-flex justify-content-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary py-3 w-50" data-bs-dismiss="modal" >Cancel</button>
                    <button type="submit" class="btn btn-success py-3 w-50">Yes, Delete</button>
                </div>
            </form>
            </div>
        </div>
    </div>
</div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

        <script>
            $(document).ready(function() {
                $('#packageTable').DataTable();
            });
        </script>

        <script>
            function disableButtonpp(button) {
                button.disabled = true;
                button.innerText = 'Processing...';
                document.getElementById('addForm').submit();
            }
        </script>
            <script>
                function setDeleteId(button) {
                    var deleteId = button.getAttribute('data-user-id');
                    document.getElementById('delete_id').value = deleteId;
                }
            </script>

    @endsection