@extends('admin.layout')
@section('content')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<style>
    .card {
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,.05);
    }
    .table td {
        vertical-align: middle;
    }
    .section-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #495057;
        border-left: 4px solid #0d6efd;
        padding-left: 8px;
    }
</style>
<div class="container-fluid py-3">
    <div class="row mb-3">
        <div class="col-md-12">
            <h4 class="fw-bold">Reward Master</h4>
        </div>
    </div>
    <div class="card">
        <div class="card-header bg-white py-3">
            <h5 class="mb-0 fw-semibold text-primary">
                Reward Configuration
            </h5>
        </div>
        <div class="card-body">
            <form action="{{ route('reward_store') }}" method="POST" id="rewardForm">
                @csrf
                {{-- Active Time --}}
                <div class="mb-4">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="section-title">Reward Active Time</span>
                        <button type="button" class="btn btn-success btn-sm" id="addTime">
                            <i class="fas fa-plus"></i> Add Time
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm" id="timeTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Active From</th>
                                    <th>Active To</th>
                                    <th width="120">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <input type="time"
                                            name="active_from_time[]"
                                            class="form-control form-control-sm"
                                            required>
                                    </td>
                                    <td>
                                        <input type="time"
                                            name="active_to_time[]"
                                            class="form-control form-control-sm"
                                            required>
                                    </td>
                                    <td>
                                        <button type="button"
                                            class="btn btn-danger btn-sm removeTime w-100">
                                            Remove
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <hr>
                {{-- Screen Reward --}}
                <div class="mb-4">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="section-title">
                            Screen Reward
                        </span>
                        <button type="button"
                            class="btn btn-success btn-sm"
                            id="addReward">
                            <i class="fas fa-plus"></i>
                            Add Reward
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm"
                            id="rewardTable">
                            <thead class="table-light">
                                <tr>
                                    <th width="180">
                                        Screen
                                    </th>
                                    <th width="220">
                                        Category
                                    </th>
                                    <th>
                                        Watch Sec
                                    </th>
                                    <th>
                                        Points
                                    </th>
                                    <th width="120">
                                        Action
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <select
                                            name="screen_name[]"
                                            class="form-control form-control-sm screen_type"
                                            required>
                                            <option value="Home">
                                                Home
                                            </option>
                                            <option value="Category">
                                                Category
                                            </option>
                                        </select>
                                    </td>
                                    <td>
                                        <div class="category-box" style="display:none;">
                                            <select
                                                name="category_id[]"
                                                class="form-control form-control-sm">
                                                <option value="">
                                                    Select Category
                                                </option>
                                                @foreach($categories as $category)
                                                <option value="{{ $category->id }}">
                                                    {{ $category->category_name }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </td>
                                    <td>
                                        <input
                                            type="number"
                                            name="watch_sec[]"
                                            class="form-control form-control-sm"
                                            min="1"
                                            required>
                                    </td>
                                    <td>
                                        <input
                                            type="number"
                                            name="points[]"
                                            class="form-control form-control-sm"
                                            min="1"
                                            required>
                                    </td>
                                    <td>
                                        <button
                                            type="button"
                                            class="btn btn-danger btn-sm removeReward w-100">
                                            Remove
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="text-end">
                    <button
                        type="submit"
                        class="btn btn-primary px-4"
                        id="saveBtn">
                        Save Configuration
                    </button>
                </div>
            </form>
        </div>
    </div>
    <br>
    {{-- Reward List --}}
    <div class="card">
        <div class="card-header bg-white py-3">
            <h5 class="mb-0 fw-semibold text-secondary">
                Reward List
            </h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table
                    class="table table-bordered table-striped dynamicTable"
                    id="rewardList">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Active Time</th>
                            <th>Screen</th>
                            <th>Category</th>
                            <th>Watch Sec</th>
                            <th>Points</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($coins as $key => $coin)
                        <tr>
                            <td>{{ $key+1 }}</td>
                            <td>
                                {{ date('h:i A', strtotime($coin->active_from_time)) }}
                                -
                                {{ date('h:i A', strtotime($coin->active_to_time)) }}
                            </td>
                            <td>
                                {{ $coin->screen_name }}
                            </td>
                            <td>
                                {{ optional($coin->category)->category_name ?? '-' }}
                            </td>
                            <td>
                                {{ $coin->watch_sec }} Sec
                            </td>
                            <td>
                                <span class="badge bg-success">
                                    {{ $coin->points }}
                                </span>
                            </td>
                            <td>
                           <button
    type="button"
    class="btn btn-sm {{ $coin->is_active ? 'btn-success' : 'btn-danger' }} statusBtn"
    data-id="{{ $coin->id }}"
    data-status="{{ $coin->is_active }}"
    data-bs-toggle="modal"
    data-bs-target="#statusModal">

    {{ $coin->is_active ? 'Active' : 'Inactive' }}
</button>
</td>
<td class="d-flex gap-2">

    <a href="{{ route('edit_reward_master', $coin->id) }}"
        class="btn btn-sm btn-primary">
        <i class="bi bi-pencil-square"></i> Edit
    </a>

    <button type="button"
        class="btn btn-sm btn-danger deleteBtn"
        data-id="{{ $coin->id }}"
        data-bs-toggle="modal"
        data-bs-target="#deleteModal">
        <i class="bi bi-trash"></i> Delete
    </button>

</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">

        <form action="{{ route('delete_reward_master') }}" method="POST">

            @csrf
            

            <input type="hidden" name="id" id="delete_reward_id">

            <div class="modal-content">

                <div class="modal-body text-center py-4">

                    <i class="bi bi-trash text-danger" style="font-size:50px;"></i>

                    <h5 class="mt-3">
                        Are you sure you want to delete this reward?
                    </h5>

                    <div class="mt-4 d-flex justify-content-center gap-3">

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

                        <button type="submit"
                            class="btn btn-danger"
                            id="deleteBtn">
                            Yes, Delete
                        </button>

                    </div>

                </div>

            </div>

        </form>

    </div>
</div>
<div class="modal fade" id="statusModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form action="{{ route('reward.status.update') }}" method="POST">
            @csrf

            <input type="hidden" name="id" id="reward_id">
            <input type="hidden" name="is_active" id="reward_status">

            <div class="modal-content">

                <div class="modal-body text-center py-4">

                    <i class="fa fa-eye-slash fa-3x text-secondary mb-3"></i>

                    <h5 class="mb-3">
                        Are you sure you want to change this status?
                    </h5>

                    <div class="d-flex justify-content-center gap-3 mt-4">

                        <button type="button"
                            class="btn btn-outline-secondary px-5"
                            data-bs-dismiss="modal">
                            No
                        </button>

                        <button type="submit"
    class="btn btn-primary px-5"
    id="statusSubmitBtn">
    Yes
</button>
                    </div>

                </div>

            </div>
        </form>
    </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 src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function () {
    //=========================
    // Save Button Loading
    //=========================
    $('#rewardForm').on('submit', function () {
        $('#saveBtn')
            .prop('disabled', true)
            .html('<i class="fa fa-spinner fa-spin"></i> Processing...');
    });
    //=========================
    // DataTable
    //=========================
    $('#rewardList').DataTable({
        pageLength: 10,
        ordering: false,
        responsive: true
    });
    //=========================
    // Add Time Row
    //=========================
    $("#addTime").click(function () {
        let row = `
        <tr>
            <td>
                <input type="time"
                    name="active_from_time[]"
                    class="form-control form-control-sm"
                    required>
            </td>
            <td>
                <input type="time"
                    name="active_to_time[]"
                    class="form-control form-control-sm"
                    required>
            </td>
            <td>
                <button type="button"
                    class="btn btn-danger btn-sm removeTime w-100">
                    Remove
                </button>
            </td>
        </tr>`;
        $("#timeTable tbody").append(row);
    });
    //=========================
    // Remove Time
    //=========================
    $(document).on("click", ".removeTime", function () {
        if ($("#timeTable tbody tr").length > 1) {
            $(this).closest("tr").remove();
        } else {
            alert("Minimum one row required.");
        }
    });
    //=========================
    // Add Reward Row
    //=========================
    $("#addReward").click(function () {
        let row = `
        <tr>
            <td>
                <select
                    name="screen_name[]"
                    class="form-control form-control-sm screen_type"
                    required>
                    <option value="Home">
                        Home
                    </option>
                    <option value="Category">
                        Category
                    </option>
                </select>
            </td>
            <td>
                <div class="category-box" style="display:none;">
                    <select
                        name="category_id[]"
                        class="form-control form-control-sm">
                        <option value="">
                            Select Category
                        </option>
                        @foreach($categories as $category)
                        <option value="{{ $category->id }}">
                            {{ $category->category_name }}
                        </option>
                        @endforeach
                    </select>
                </div>
            </td>
            <td>
                <input
                    type="number"
                    name="watch_sec[]"
                    class="form-control form-control-sm"
                    min="1"
                    required>
            </td>
            <td>
                <input
                    type="number"
                    name="points[]"
                    class="form-control form-control-sm"
                    min="1"
                    required>
            </td>
            <td>
                <button
                    type="button"
                    class="btn btn-danger btn-sm removeReward w-100">
                    Remove
                </button>
            </td>
        </tr>`;
        $("#rewardTable tbody").append(row);
    });
    //=========================
    // Remove Reward
    //=========================
    $(document).on("click", ".removeReward", function () {
        if ($("#rewardTable tbody tr").length > 1) {
            $(this).closest("tr").remove();
        } else {
            alert("Minimum one row required.");
        }
    });
    //=========================
    // Show/Hide Category
    //=========================
    $(document).on('change', '.screen_type', function () {
        let row = $(this).closest('tr');
        if ($(this).val() == 'Category') {
            row.find('.category-box').show();
            row.find('select[name="category_id[]"]')
                .prop('required', true);
        } else {
            row.find('.category-box').hide();
            row.find('select[name="category_id[]"]')
                .val('')
                .prop('required', false);
        }
    });
});
</script>
<script>
   $(document).on('click', '.statusBtn', function () {

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

    $('#reward_id').val(id);

    // Toggle status
    if (status == 1) {
        $('#reward_status').val(0); // Active -> Inactive
    } else {
        $('#reward_status').val(1); // Inactive -> Active
    }

});

$('#statusModal form').on('submit', function () {

    $('#statusSubmitBtn')
        .prop('disabled', true)
        .html('<i class="fa fa-spinner fa-spin me-1"></i> Processing...');

});

$(document).on('click', '.deleteBtn', function () {

    $('#delete_reward_id').val($(this).data('id'));

});

$('#deleteModal form').submit(function(){

    $('#deleteBtn')
        .prop('disabled', true)
        .html('<i class="fa fa-spinner fa-spin"></i> Deleting...');

});
</script>
@endsection