@extends('admin.layouts.master')

@section('title', 'Manage Divisions')

@section('content')
<div class="row">
    <div class="col-lg-12">

        @include('admin.partial.validation-error')

        <div class="card shadow mt-3">
            <div class="card-header justify-content-between align-items-center ">
                <h3 class="card-title float-left mb-0">Division List</h3>

                <button class="btn btn-primary float-right"
                        data-toggle="modal"
                        data-target="#divisionModal"
                        onclick="createDivision()">
                    <i class="fa fa-plus"></i> Add New
                </button>
            </div>

            <div class="card-body">
                <table class="table table-bordered table-hover">
                    <thead class="thead-dark">
                        <tr>
                            <th>#</th>
                            <th>Name (BN)</th>
                            <th>Name (EN)</th>
                            <th>Code</th>
                            <th>Flag</th>
                            <th>Status</th>
                            <th>Country</th>
                            <th width="120">Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach($divisions as $key => $item)
                        <tr>
                            <td>{{ $key + 1 }}</td>
                            <td>{{ $item->name }}</td>
                            <td>{{ $item->en_name }}</td>
                            <td>{{ $item->code }}</td>

                            <td>
                                @if($item->flag)
                                    <img src="{{ asset('storage/'.$item->flag) }}" width="45" height="25"
                                         class="border rounded">
                                @endif
                            </td>

                            <td>
                                @if($item->stream_status == 1)
                                    <span class="badge badge-success">Active</span>
                                @else
                                    <span class="badge badge-danger">Inactive</span>
                                @endif
                            </td>

                            <td>{{ $item->country->name ?? 'N/A' }}</td>

                            <td>
                                <button class="btn btn-info btn-sm"
                                        data-toggle="modal"
                                        data-target="#divisionModal"
                                        onclick='editDivision(@json($item))'>
                                    <i class="fa fa-edit"></i>
                                </button>

                                <button class="btn btn-danger btn-sm"
                                        onclick="deleteDivision({{ $item->id }})">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>

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

    </div>
</div>

<!-- ====================== -->
<!--      DIVISION MODAL    -->
<!-- ====================== -->
<div class="modal fade" id="divisionModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form id="divisionForm" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="_method" id="formMethod" value="POST">

            <div class="modal-content">
                <div class="modal-header bg-dark text-white">
                    <h5 class="modal-title" id="modalTitle">Create Division</h5>

                    <button type="button" class="close text-white"
                            data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">

                    <div class="row">

                        <div class="col-lg-6 mb-3">
                            <label>Division Name (BN)*</label>
                            <input type="text" name="name" id="name"
                                   class="form-control" required>
                        </div>

                        <div class="col-lg-6 mb-3">
                            <label>Division Name (EN)*</label>
                            <input type="text" name="en_name" id="en_name"
                                   class="form-control" required>
                        </div>

                        <div class="col-lg-6 mb-3">
                            <label>Division Code</label>
                            <input type="text" name="code" id="code"
                                   class="form-control">
                        </div>

                        <div class="col-lg-6 mb-3">
                            <label>Country*</label>
                            <select name="country_id" id="country_id"
                                    class="form-control" required>
                                @foreach($countries as $key => $value)
                                    <option value="{{ $value->id }}">{{ $value->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-lg-6 mb-3">
                            <label>Flag Image</label>
                            <input type="file" name="flag" id="flag"
                                   class="form-control">

                            <img id="flagPreview"
                                 class="border mt-2 d-none"
                                 width="70" height="45">
                        </div>

                        <div class="col-lg-6 mb-3">
                            <label>Stream Link</label>
                            <input type="text" name="stream_link" id="stream_link"
                                   class="form-control">
                        </div>

                        <div class="col-lg-6 mb-3">
                            <label>Status</label>
                            <select name="stream_status" id="stream_status"
                                    class="form-control">
                                <option value="1">Active</option>
                                <option value="0">In Active</option>
                            </select>
                        </div>

                        <div class="col-lg-6 mb-3">
                            <label>Population</label>
                            <input type="number" name="population" id="population"
                                   class="form-control">
                        </div>

                        <div class="col-lg-12 mb-3">
                            <label>History</label>
                            <textarea name="history" id="history"
                                      class="form-control" rows="3"></textarea>
                        </div>

                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-secondary"
                            data-dismiss="modal">Close</button>

                    <button type="submit"
                            class="btn btn-primary">
                        Save Division
                    </button>
                </div>

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

<!-- ====================== -->
<!--     DELETE FORM        -->
<!-- ====================== -->
<form id="deleteForm" method="POST">
    @csrf
    @method("DELETE")
</form>

@endsection

@section('script')
<script>
    function createDivision() {
        $("#modalTitle").text("Create Division");
        $("#divisionForm").attr("action", "{{ route('division.store') }}");
        $("#formMethod").val("POST");

        $("#divisionForm")[0].reset();
        $("#flagPreview").addClass("d-none");
    }

    function editDivision(data) {
        $("#modalTitle").text("Edit Division");

        $("#divisionForm").attr("action", "/admin/division/" + data.id);
        $("#formMethod").val("PUT");

        $("#name").val(data.name);
        $("#en_name").val(data.en_name);
        $("#code").val(data.code);
        $("#country_id").val(data.country_id);
        $("#population").val(data.population);
        $("#stream_link").val(data.stream_link);
        $("#stream_status").val(data.stream_status);
        $("#history").val(data.history);

        if (data.flag) {
            $("#flagPreview")
                .removeClass("d-none")
                .attr("src", "/storage/" + data.flag);
        }
    }

    function deleteDivision(id) {
        if (confirm("Are you sure you want to delete this division?")) {
            $("#deleteForm").attr("action", "/admin/division/" + id).submit();
        }
    }
</script>
@endsection