@extends('admin.layouts.app')

@section('content')
    <div class="conatiner-fluid content-inner mt-n5 py-0" style="margin-top: 100px !important;">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <div class="flex-wrap d-flex justify-content-between align-items-center">
                            <div>
                                <div class="header-title">
                                    <h2 class="card-title">Tambah Cabang Baru</h2>
                                    <p>Masukkan data cabang</p>
                                </div>
                            </div>
                            <div>
                                <a href="{{ url("/admin/branch") }}" class="btn btn-md btn-secondary">
                                    <i class="fa fa-arrow-left"></i> Kembali
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form id="form-branch">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Nama Cabang</label>
                                        <input type="text" class="form-control" id="name" name="name" placeholder="Contoh: Kantor Pusat Jakarta" required>
                                        <small class="text-danger" id="name-error"></small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Status</label>
                                        <select class="form-control" id="is_active" name="is_active">
                                            <option value="1">Aktif</option>
                                            <option value="0">Tidak Aktif</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Latitude (Lintang)</label>
                                        <input type="number" step="0.0000001" class="form-control" id="latitude" name="latitude" placeholder="Contoh: -6.8619104" required>
                                        <small class="text-muted">Rentang: -90 hingga 90</small>
                                        <small class="text-danger" id="latitude-error"></small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Longitude (Bujur)</label>
                                        <input type="number" step="0.0000001" class="form-control" id="longitude" name="longitude" placeholder="Contoh: 107.6357744" required>
                                        <small class="text-muted">Rentang: -180 hingga 180</small>
                                        <small class="text-danger" id="longitude-error"></small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Radius Check-in (meter)</label>
                                        <input type="number" class="form-control" id="radius" name="radius" placeholder="Contoh: 50" min="1" max="10000" required>
                                        <small class="text-muted">Jarak yang diizinkan untuk check-in</small>
                                        <small class="text-danger" id="radius-error"></small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Deskripsi</label>
                                        <textarea class="form-control" id="description" name="description" rows="3" placeholder="Masukan deskripsi cabang"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-success">
                                        <i class="fa fa-save"></i> Simpan
                                    </button>
                                    <a href="{{ url("/admin/branch") }}" class="btn btn-secondary">
                                        <i class="fa fa-times"></i> Batal
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#form-branch').on('submit', function(e) {
                e.preventDefault();
                clearErrors();
                
                var formData = {
                    name: $('#name').val(),
                    latitude: $('#latitude').val(),
                    longitude: $('#longitude').val(),
                    radius: $('#radius').val(),
                    is_active: $('#is_active').val(),
                    description: $('#description').val()
                };

                $.ajaxSetup({
                    headers:{
                        'Authorization': "Bearer {{$session_token}}",
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: '/api/admin/branches',
                    type: 'POST',
                    data: JSON.stringify(formData),
                    contentType: 'application/json',
                    success: function(response) {
                        Swal.fire('Berhasil!', 'Cabang berhasil ditambahkan', 'success').then(() => {
                            window.location.href = '/admin/branch';
                        });
                    },
                    error: function(error) {
                        if(error.responseJSON && error.responseJSON.errors) {
                            showErrors(error.responseJSON.errors);
                        } else {
                            Swal.fire('Error!', 'Gagal menambahkan cabang', 'error');
                        }
                    }
                });
            });

            function clearErrors() {
                $('[id$="-error"]').text('');
            }

            function showErrors(errors) {
                for(var field in errors) {
                    var errorElement = $('#' + field + '-error');
                    if(errorElement.length) {
                        errorElement.text(errors[field][0]);
                    }
                }
            }
        });
    </script>
@endsection