@include('header')


<!--**********************************
            Content body start
        ***********************************-->
<div class="content-body">
    <div class="page-titles">
        <h5 class="dashboard_bar">Store Information</h5>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">
                    Dashboard </a>
            </li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">Add Store</a></li>
        </ul>
    </div>
    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Store</h4>
                    </div>
                    <div class="card-body">
                        <div class="form-validation">

                            <form method="POST" action="{{ route('settings.add_store') }}" id="storeForm">
                                @csrf
                                <div class="row align-items-center mb-3">
                                    <input type="hidden" id="store_id" name="id">


                                    <label class="col-md-2 col-form-label " for="validationCustom01">Store
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="col-md-2">
                                        <input type="text" name="store" class="form-control text-capitalize"
                                            id="store_input" placeholder="Enter store" value="" required>
                                        <div class="invalid-feedback">
                                            Please enter a username.
                                        </div>
                                    </div>
                                    <label class="col-md-2 col-form-label " for="validationCustom01">Contact Person
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="col-md-2">
                                        <input type="text" name="contact_person" class="form-control text-capitalize"
                                            id="contact_person" placeholder="Enter Name" value="">
                                        <div class="invalid-feedback">
                                            Please enter a username.
                                        </div>
                                    </div>
                                    <label class="col-md-2 col-form-label " for="validationCustom01">Mobile No
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="col-md-2">
                                        <input type="text" name="mobile_no" class="form-control text-capitalize"
                                            id="mobile_no" placeholder="Enter Mobile No" value="" maxlength="10"   pattern="[0-9]{10}" >
                                        <div class="invalid-feedback">
                                            Please enter a username.
                                        </div>
                                    </div>
                                    <label class="col-md-2 col-form-label " for="validationCustom01">Email
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="col-md-2">
                                        <input type="email" name="email" class="form-control text-capitalize" id="email"
                                            placeholder="Enter Email" value="">
                                        <div class="invalid-feedback">
                                            Please enter a username.
                                        </div>
                                    </div>
                                    <label class="col-md-2 col-form-label " for="validationCustom01">Address
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="col-md-5 mt-3">
                                        <textarea name="address" class="form-control" id="address" rows="5"
                                            placeholder="Store address" required></textarea>
                                        <div class="invalid-feedback">
                                            Please enter a username.
                                        </div>
                                    </div>
                                    <label class="col-md-2 col-form-label " for="validationCustom01">State
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="col-md-2">
                                        <select name="state" class="form-control" id="state">
                                            <option value="">Select</option>
                                            <option value="TamilNadu">
                                                TamilNadu</option>
                                            <option value="Pondicherry">
                                                Pondicherry</option>
                                        </select>
                                    </div>

                                </div>




                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
                                </div>
                            </form>

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

            </div>

        </div>
        <div class="col-xl-12">
            <div class="card dz-card" id="accordion-three">
                <div class="card-header flex-wrap d-flex justify-content-between border-0">
                    <div>
                        <h4 class="card-title">Stores</h4>

                    </div>

                </div>

                <!-- /tab-content -->
                <div class="tab-content" id="myTabContent-2">
                    <div class="tab-pane fade show active" id="withoutSpace" role="tabpanel"
                        aria-labelledby="home-tab-2">
                        <div class="card-body pt-0">
                            <div class="table-responsive">
                                <table id="example3" class="display table" style="min-width: 845px">
                                    <thead>
                                        <tr>
                                            <th>S.No</th>
                                            <th>Store</th>
                                            <th>Contact Person</th>
                                            <th>Mobile No</th>
                                            <th>Email</th>
                                            <th>Address</th>
                                            <th>State</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $sno = 1; @endphp

                                        @foreach($store as $store)
                                        <tr>
                                            <td>
                                                {{ $sno++ }}

                                            </td>
                                            <td>{{ $store->store }}</td>
                                            <td>{{ $store->contact_person }}</td>
                                            <td>{{ $store->mobileno }}</td>
                                            <td>{{ $store->email }}</td>
                                            <td>{{ $store->address }}</td>
                                            <td>{{ $store->state }}</td>

                                            <td>
                                                <a href="javascript:void(0);"
                                                    class="badge bg-primary text-decoration-none edit-store"
                                                    data-id="{{ $store->id }}" data-name="{{ $store->store }}"
                                                    data-contact="{{ $store->contact_person }}"
                                                    data-mobileno="{{ $store->mobileno }}"
                                                    data-email="{{ $store->email }}"
                                                    data-address="{{ $store->address }}"
                                                    data-state="{{ $store->state }}">
                                                    <i class="fas fa-pencil-alt"></i>
                                                </a>
                                                <a href="javascript:void(0);"
                                                    class="badge bg-danger text-decoration-none delete-store"
                                                    data-id="{{ $store->id }}" data-name="{{ $store->store }}"
                                                    data-gst="{{ $store->gst }}">
                                                    <i class="fas fa-trash-alt"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- /tab-content -->

            </div>
        </div>
    </div>
</div>
@include('footer')
<!-- Load SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Trigger Swal if session has success -->
@if(session('success'))
<script>
Swal.fire({
    title: 'Success!',
    text: {
        !!json_encode(session('success')) !!
    },
    icon: 'success'
}).then(() => {
    location.reload();
});
</script>
@endif

<script>
document.querySelectorAll('.edit-store').forEach(function(button) {
    button.addEventListener('click', function() {
        const storeId = this.getAttribute('data-id');
        const storeName = this.getAttribute('data-name');
        const ContactPerson = this.getAttribute('data-contact');
        const Email = this.getAttribute('data-email');
        const MobileNo = this.getAttribute('data-mobileno');
        const Address = this.getAttribute('data-address');
        const State = this.getAttribute('data-state');

        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });

        // ✅ Set the input value for editing
        document.getElementById('store_input').value = storeName;

        // ✅ Set hidden input or other values
        document.getElementById('store_id').value = storeId;
        document.getElementById('contact_person').value = ContactPerson;
        document.getElementById('mobile_no').value = MobileNo;
        document.getElementById('email').value = Email;
        document.getElementById('address').value = Address;
        document.getElementById('state').value = State;
        document.getElementById('storeForm').action = '{{ route("settings.update_store") }}';

        // ✅ Update button label
        document.getElementById('submitBtn').innerText = 'Update';
    });
});
$(document).on('click', '.delete-store', function(e) {
    e.preventDefault();

    let storeId = $(this).data('id');
    let storeName = $(this).data('name');
    let url = "{{ route('store.destroy', ':id') }}";
    url = url.replace(':id', storeId);

    Swal.fire({
        title: `Delete store "${storeName}"?`,
        text: "This action cannot be undone!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'Cancel',
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: url,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire('Deleted!', response.message, 'success');
                        location.reload();
                    } else {
                        Swal.fire('Error', response.message, 'error');
                    }
                },
                error: function(xhr) {
                    Swal.fire('Error', 'Something went wrong!', 'error');
                }
            });
        }
    });
});
</script>